<template>
    <div  class="shadow-drop-2-center">
        <el-avatar shape="circle" :size="150" fit="scale-down" class="at-item">
            <img  src="./images/img.jpg"  style="width: 150px;height: 150px;"/>
        </el-avatar>
        <br>
        <span class="Dreamself">Dreamself</span>
        <br>
        <el-row>
            <i class="iconfont icon-github"></i>&nbsp;&nbsp;
            <i class="iconfont icon-gitee-fill-round"></i>
        </el-row>
        <hr>
        <span>{{setNowTime()}}</span>
        <br>
        <el-row>
            <p>游戏是不会玩的</p>
            <p>代码也不会写</p>
            <p>只剩下可爱了捏</p>
        </el-row>
    </div>
</template>

<script>
export default {
    name:'MeCard',
    data() {
        return {
            hours :new Date().getHours(),
            minutes:new Date().getMinutes(),
            year:0,
            month:0,
            day:0,
            week:0,
        }
    },
    methods: {
        setNowTime(){
            this.year = new Date().getFullYear()
            this.month = new Date().getMonth()+1
            this.day = new Date().getDate()
            this.week = new Date().getDay()
            switch(this.week){
                case 1:
                    this.week = '一'
                    break;
                case 2:
                    this.week = '二'
                    break;
                case 3:
                    this.week = '三'
                    break;
                case 4:
                    this.week = '四'
                    break;
                case 5:
                    this.week = '五'
                    break;
                case 6:
                    this.week = '六'
                    break;
                case 7:
                    this.week = '天'
                    break;
            }

            return this.year+'.'+this.month+'.'+this.day+'  '+
                    this.hours+':'+this.minutes+'  星期'+
                    this.week
        },
        
    },
    mounted() {
        let nowTimeDHQ = setInterval(()=>{
            this.hours = new Date().getHours()
            this.minutes = new Date().getMinutes()
        },60000)
    },
    beforeDestroy(){
        console.log('定时器被销毁了')
        clearInterval(nowTimeDHQ)
    }
}
</script>

<style scoped>
    .el-avatar{
        margin-top: 50px;
    }
    .Dreamself{
        font-size: x-large;
        font-family: STSong
    }
    /* 头像悬停抖动 */
	.at-item:hover {
		width: 100px; height: 100px; background-color:#ffe672; 
		
		animation-name: wobble-hor-top;
		animation-duration: 1s;
		animation-timing-function: ease;
		animation-delay: 0s;
		animation-iteration-count: 1;
		animation-direction: normal;
		animation-fill-mode: none;
			
		/* shorthand
		animation: wobble-hor-top 1s ease 0s 1 normal none;*/
	}
	@keyframes wobble-hor-top {
			
		0% {
			transform:translateX(0%);
			transform-origin:50% 50%;
		}
		15% {
			transform:translateX(-30px) rotate(6deg);
		}
		30% {
			transform:translateX(15px) rotate(-6deg);
		}
		45% {
			transform:translateX(-15px) rotate(3.6deg);
		}
		60% {
			transform:translateX(9px) rotate(-2.4deg);
		}
		75% {
			transform:translateX(-6px) rotate(1.2deg);
		}
		100% {
			transform:translateX(0%);
			transform-origin:50% 50%;
		}
	}
</style>